<template>
    <div class="main_content">
        <div class="scorll">
            <div class="content">
                <div class="search">
                    <el-button :type="!btnList.includes('fmam/weighRoom/add')?'info':'primary'" @click="updateRow(0)" plain size="small" :disabled="!btnList.includes('fmam/weighRoom/add')">添加磅房</el-button>
                </div>
                <div class="table">
                    <el-table :data="list" style="width: 100%">
                        <el-table-column fixed prop="code" label="磅房编码"></el-table-column>
                        <el-table-column prop="name" label="磅房名称"></el-table-column>
                        <el-table-column prop="deptName" label="组织机构名称"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="300" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="getDetails(scope.$index, list)" type="text" size="small">查看详情</el-button>
                                <el-button @click.native.prevent="updateRow(1,scope.$index, list)" type="text" size="small" :disabled="!btnList.includes('fmam/weighRoom/edit')">编辑</el-button>
                                <el-button :style="!btnList.includes('fmam/weighRoom/del')?'color:#C0C4CC':'color:red'" @click.native.prevent="remove(scope.$index, list)" type="text" size="small" :disabled="!btnList.includes('fmam/weighRoom/del')">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="list.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: right;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(1)" size="small" plain type="info">取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="updateModal" :title="isAdd?'添加磅房':'编辑磅房'" :mask-closable="false">
            <div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>磅房编号:</span>
                    <Input v-model="code" placeholder="请输入磅房编号" style="width: 300px" show-word-limit :maxlength="countLength" clearable />
                </div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>磅房名称:</span>
                    <Input v-model="name" placeholder="请输入磅房名称" style="width: 300px" show-word-limit :maxlength="count" clearable />
                </div>
                <div class="item" v-if="!isAdd">
                    <span>组织机构</span>
                    <Input v-model="deptName" disabled style="width: 300px" clearable />
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(2)" size="small" plain type="info">取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">保存</el-button>
            </div>
        </Modal>
        <Modal v-model="detailsModal" :title="title + '详情'" width="1000px" :mask-closable="false">
            <div class="table" style="width:96%;margin:20px auto;">
                <el-table :data="detailsList" style="width: 100%">
                    <el-table-column fixed prop="weighRoomId" label="磅房id"></el-table-column>
                    <el-table-column prop="activeFlag" label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.activeFlag == 0">未激活</span>
                            <span v-if="scope.row.activeFlag == 1">已激活</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="activeDate" label="激活日期"></el-table-column>
                    <el-table-column prop="expireDate" label="失效日期"></el-table-column>
                    <el-table-column prop="licenseFile" label="授权地址"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="downLoadlicenseFile(scope.$index, detailsList)" :disabled="!scope.row" type="text" size="small" v-preventReClick="1500">下载授权文件</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer">
                <el-button @click="licenseGenerate" :type="detailsList.length>0?'info':'primary'" :disabled="detailsList.length>0" size="small" plain>生成授权文件</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getWeighRoomList,
    getWeighRoomAdd,
    getWeighRoomEdit,
    getWeighRoomDel,
    getWeighRoomLicenseFileList,
    getWeighRoomLicenseGenerate
} from "@/api/api.js";
export default {
    data() {
        return {
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            deptId: "",
            list: [],
            deleteModal: false,
            removeID: "",
            updateModal: false,
            isAdd: true,
            code: "",
            name: "",
            updateId: "",
            detailsModal: false,
            detailsList: [],
            title: "",
            detailsId: "",
            deptName: "",
            btnList:[],
            count:10,
            countLength:4
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.getAllList();
            }
        }
    },
    methods: {
        //获取磅房列表
        getAllList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                deptId: this.deptId
            };
            getWeighRoomList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        updateRow(type, index, rows) {
            if (type == 0) {
                this.isAdd = true;
                this.code = "";
                this.name = "";
            } else if (type == 1) {
                this.isAdd = false;
                this.code = rows[index].code;
                this.name = rows[index].name;
                this.updateId = rows[index].id;
            }
            this.updateModal = true;
        },
        submitAll() {
            let str = /^[0-9a-zA-Z]*$/g;
            if (this.code == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "磅房编码不能为空"
                });
                return;
            } else {
                if (!str.test(this.code)) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "编码只能由数字或字母组成"
                    });
                    return;
                }
            }

            if (this.name == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "磅房名称不能为空"
                });
                return;
            }
            if (this.isAdd) {
                let params = {
                    name: this.name,
                    code: this.code,
                    deptId: this.deptId,
                    deptName: this.deptName
                };
                getWeighRoomAdd(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                let params = {
                    id: this.updateId,
                    name: this.name,
                    code: this.code,
                    deptId: this.deptId
                };
                getWeighRoomEdit(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        success() {
            this.$Message.success("操作成功");
            this.pageNum = this.isAdd ? 1 : this.pageNum;
            this.current = this.isAdd ? 1 : this.current;
            this.updateModal = false;
            this.code = "";
            this.name = "";
            this.getAllList();
        },
        remove(index, rows) {
            this.removeID = rows[index].id;
            this.deleteModal = true;
        },
        getDetails(index, rows) {
            this.title = rows[index].name;
            this.detailsId = rows[index].id;
            this.detailsIndex = index;
            this.detailsRows = rows;
            let params = {
                weighRoomId: rows[index].id
            };
            getWeighRoomLicenseFileList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.detailsModal = true;
                        this.detailsList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        downLoadlicenseFile(index, rows) {
            window.open(rows[index].licenseFile);
        },
        licenseGenerate() {
            getWeighRoomLicenseGenerate(this.detailsId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("授权成功");
                        this.getDetails(this.detailsIndex, this.detailsRows);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        detele() {
            getWeighRoomDel(this.removeID)
                .then(res => {
                    if (res.code == 200) {
                        this.deleteModal = false;
                        this.$Message.success("操作成功");
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 1) {
                this.deleteModal = false;
            } else if (type == 2) {
                this.updateModal = false;
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getAllList();
    }
};
</script>


<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/common.less";
// .main_content{
//     background-color: #f5f5f5;
// }
.item {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    padding-left: 16px;
    box-sizing: border-box;
    .tip {
        position: absolute;
        color: red;
        font-size: 16px;
        top: 8px;
        left: 0;
    }
}
</style>
